<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->

  <!-- Title -->
  <title>Original - Lifestyle Blog Template</title>

  <!-- Favicon -->
  <link rel="icon" href="img/core-img/favicon.ico">

  <!-- Style CSS -->
  <link rel="stylesheet" th:href="@{style.css}" href="style.css">

</head>

<body>
<!-- Preloader -->
<div id="preloader">
  <div class="preload-content">
    <div id="original-load"></div>
  </div>
</div>

<!-- Subscribe Modal -->
<div class="subscribe-newsletter-area">
  <div class="modal fade" id="subsModal" tabindex="-1" role="dialog" aria-labelledby="subsModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <div class="modal-body">
          <h5 class="title">Subscribe to my newsletter</h5>
          <form action="#" class="newsletterForm" method="post">
            <input type="email" name="email" id="subscribesForm2" placeholder="Your e-mail here">
            <button type="submit" class="btn original-btn">Subscribe</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ##### Header Area Start ##### -->
<header class="header-area">

  <!-- Top Header Area -->
  <div class="top-header">
    <div class="container h-100">
      <div class="row h-100 align-items-center">
        <!-- Breaking News Area -->
        <div class="col-12 col-sm-8">
          <div class="breaking-news-area">
            <div id="breakingNewsTicker" class="ticker">
              <ul>
                <li><a href="#">Hello World!</a></li>
                <li><a href="#">Hello Universe!</a></li>
                <li><a href="#">Hello Original!</a></li>
                <li><a href="#">Hello Earth!</a></li>
                <li><a href="#">Hello Colorlib!</a></li>
              </ul>
            </div>
          </div>
        </div>
        <!-- Top Social Area -->
        <div class="col-12 col-sm-4">
          <div class="top-social-area">
            <a href="#" data-toggle="tooltip" data-placement="bottom" title="Pinterest"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
            <a href="#" data-toggle="tooltip" data-placement="bottom" title="Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
            <a href="#" data-toggle="tooltip" data-placement="bottom" title="Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
            <a href="#" data-toggle="tooltip" data-placement="bottom" title="Dribbble"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
            <a href="#" data-toggle="tooltip" data-placement="bottom" title="Behance"><i class="fa fa-behance" aria-hidden="true"></i></a>
            <a href="#" data-toggle="tooltip" data-placement="bottom" title="Linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Logo Area -->
  <div class="logo-area text-center">
    <div class="container h-100">
      <div class="row h-100 align-items-center">
        <div class="col-12">
          <a href="../templates/index.html" class="original-logo"><img src="img/core-img/logo.png" alt=""></a>
        </div>
      </div>
    </div>
  </div>

  <!-- Nav Area -->
  <div class="original-nav-area" id="stickyNav">
    <div class="classy-nav-container breakpoint-off">
      <div class="container">
        <!-- Classy Menu -->
        <nav class="classy-navbar justify-content-between">

          <!-- Subscribe btn -->
          <div class="subscribe-btn">
            <a href="#" class="btn subscribe-btn" data-toggle="modal" data-target="#subsModal">Subscribe</a>
          </div>

          <!-- Navbar Toggler -->
          <div class="classy-navbar-toggler">
            <span class="navbarToggler"><span></span><span></span><span></span></span>
          </div>

          <!-- Menu -->
          <div class="classy-menu" id="originalNav">
            <!-- close btn -->
            <div class="classycloseIcon">
              <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
            </div>

            <!-- Nav Start -->
            <div class="classynav">
              <ul>
                <li><a href="../templates/index.html">Home</a></li>
                <li><a href="#">Pages</a>
                  <ul class="dropdown">
                    <li><a href="../templates/index.html">Home</a></li>
                    <li><a href="about-us.html">About Us</a></li>
                    <li><a href="single-post.html">Single Post</a></li>
                    <li><a href="contact.html">Contact</a></li>
                    <li><a href="coming-soon.html">Coming Soon</a></li>
                  </ul>
                </li>
                <li><a href="#">Catagory</a>
                  <ul class="dropdown">
                    <li><a href="#">Catagory 1</a></li>
                    <li><a href="#">Catagory 1</a></li>
                    <li><a href="#">Catagory 1</a>
                      <ul class="dropdown">
                        <li><a href="#">Catagory 2</a></li>
                        <li><a href="#">Catagory 2</a></li>
                        <li><a href="#">Catagory 2</a>
                          <ul class="dropdown">
                            <li><a href="#">Catagory 3</a></li>
                            <li><a href="#">Catagory 3</a></li>
                            <li><a href="#">Catagory 3</a></li>
                            <li><a href="#">Catagory 3</a></li>
                            <li><a href="#">Catagory 3</a></li>
                          </ul>
                        </li>
                        <li><a href="#">Catagory 2</a></li>
                        <li><a href="#">Catagory 2</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Catagory 1</a></li>
                    <li><a href="#">Catagory 1</a></li>
                  </ul>
                </li>
                <li><a href="about-us.html">About Us</a></li>
                <li><a href="#">Megamenu</a>
                  <div class="megamenu">
                    <ul class="single-mega cn-col-4">
                      <li class="title">Headline 1</li>
                      <li><a href="#">Mega Menu Item 1</a></li>
                      <li><a href="#">Mega Menu Item 2</a></li>
                      <li><a href="#">Mega Menu Item 3</a></li>
                      <li><a href="#">Mega Menu Item 4</a></li>
                      <li><a href="#">Mega Menu Item 5</a></li>
                    </ul>
                    <ul class="single-mega cn-col-4">
                      <li class="title">Headline 2</li>
                      <li><a href="#">Mega Menu Item 1</a></li>
                      <li><a href="#">Mega Menu Item 2</a></li>
                      <li><a href="#">Mega Menu Item 3</a></li>
                      <li><a href="#">Mega Menu Item 4</a></li>
                      <li><a href="#">Mega Menu Item 5</a></li>
                    </ul>
                    <ul class="single-mega cn-col-4">
                      <li class="title">Headline 3</li>
                      <li><a href="#">Mega Menu Item 1</a></li>
                      <li><a href="#">Mega Menu Item 2</a></li>
                      <li><a href="#">Mega Menu Item 3</a></li>
                      <li><a href="#">Mega Menu Item 4</a></li>
                      <li><a href="#">Mega Menu Item 5</a></li>
                    </ul>
                    <ul class="single-mega cn-col-4">
                      <li class="title">Headline 4</li>
                      <li><a href="#">Mega Menu Item 1</a></li>
                      <li><a href="#">Mega Menu Item 2</a></li>
                      <li><a href="#">Mega Menu Item 3</a></li>
                      <li><a href="#">Mega Menu Item 4</a></li>
                      <li><a href="#">Mega Menu Item 5</a></li>
                    </ul>
                  </div>
                </li>
                <li><a href="contact.html">Contact</a></li>
              </ul>

              <!-- Search Form  -->
              <div id="search-wrapper">
                <form action="#">
                  <input type="text" id="search" placeholder="Search something...">
                  <div id="close-icon"></div>
                  <input class="d-none" type="submit" value="">
                </form>
              </div>
            </div>
            <!-- Nav End -->
          </div>
        </nav>
      </div>
    </div>
  </div>
</header>
<!-- ##### Header Area End ##### -->

<!-- ##### Google Map #####   -->
<!--<div class="map-area">-->
<!--  <div id="googleMap" class="googleMap"></div>-->
<!--</div>-->

<!-- ##### Contact Area Start ##### -->
<section class="contact-area section-padding-100">
  <div class="container">
    <div class="row justify-content-center">
      <!-- Contact Form Area -->
      <div class="col-12 col-md-10 col-lg-9">
        <div class="contact-form">
          <h5>Get in Touch</h5>
          <!-- Contact Form -->
          <form action="#" method="post">
            <div class="row">
              <div class="col-12 col-md-6">
                <div class="group">
                  <input type="text" name="name" id="name" required>
                  <span class="highlight"></span>
                  <span class="bar"></span>
                  <label>Name</label>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="group">
                  <input type="email" name="email" id="email" required>
                  <span class="highlight"></span>
                  <span class="bar"></span>
                  <label>Email</label>
                </div>
              </div>
              <div class="col-12">
                <div class="group">
                  <input type="text" name="subject" id="subject" required>
                  <span class="highlight"></span>
                  <span class="bar"></span>
                  <label>Subject</label>
                </div>
              </div>
              <div class="col-12">
                <div class="group">
                  <textarea name="message" id="message" required></textarea>
                  <span class="highlight"></span>
                  <span class="bar"></span>
                  <label>Message</label>
                </div>
              </div>
              <div class="col-12">
                <button type="submit" class="btn original-btn">Send Message</button>
              </div>
            </div>
          </form>
        </div>
      </div>

      <div class="col-12 col-md-10 col-lg-3">
        <div class="post-sidebar-area">

          <!-- Widget Area -->
          <div class="sidebar-widget-area">
            <form action="#" class="search-form">
              <input type="search" name="search" id="searchForm" placeholder="Search">
              <input type="submit" value="submit">
            </form>
          </div>

          <!-- Widget Area -->
          <div class="sidebar-widget-area">
            <h5 class="title subscribe-title">Subscribe to my newsletter</h5>
            <div class="widget-content">
              <form action="#" class="newsletterForm">
                <input type="email" name="email" id="subscribesForm" placeholder="Your e-mail here">
                <button type="submit" class="btn original-btn">Subscribe</button>
              </form>
            </div>
          </div>

          <!-- Widget Area -->
          <div class="sidebar-widget-area">
            <div class="widget-content social-widget d-flex justify-content-between">
              <a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
              <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
              <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
              <a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
              <a href="#"><i class="fa fa-behance" aria-hidden="true"></i></a>
              <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</section>
<!-- ##### Contact Area End ##### -->

<!-- ##### Instagram Feed Area Start ##### -->
<div class="instagram-feed-area">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="insta-title">
          <h5>Follow us @ Instagram</h5>
        </div>
      </div>
    </div>
  </div>
  <!-- Instagram Slides -->
  <div class="instagram-slides owl-carousel">
    <!-- Single Insta Feed -->
    <div class="single-insta-feed">
      <img src="img/instagram-img/1.png" alt="">
      <!-- Hover Effects -->
      <div class="hover-effects">
        <a href="#" class="d-flex align-items-center justify-content-center"><i class="fa fa-instagram"></i></a>
      </div>
    </div>
    <!-- Single Insta Feed -->
    <div class="single-insta-feed">
      <img src="img/instagram-img/2.png" alt="">
      <!-- Hover Effects -->
      <div class="hover-effects">
        <a href="#" class="d-flex align-items-center justify-content-center"><i class="fa fa-instagram"></i></a>
      </div>
    </div>
    <!-- Single Insta Feed -->
    <div class="single-insta-feed">
      <img src="img/instagram-img/3.png" alt="">
      <!-- Hover Effects -->
      <div class="hover-effects">
        <a href="#" class="d-flex align-items-center justify-content-center"><i class="fa fa-instagram"></i></a>
      </div>
    </div>
    <!-- Single Insta Feed -->
    <div class="single-insta-feed">
      <img src="img/instagram-img/4.png" alt="">
      <!-- Hover Effects -->
      <div class="hover-effects">
        <a href="#" class="d-flex align-items-center justify-content-center"><i class="fa fa-instagram"></i></a>
      </div>
    </div>
    <!-- Single Insta Feed -->
    <div class="single-insta-feed">
      <img src="img/instagram-img/5.png" alt="">
      <!-- Hover Effects -->
      <div class="hover-effects">
        <a href="#" class="d-flex align-items-center justify-content-center"><i class="fa fa-instagram"></i></a>
      </div>
    </div>
    <!-- Single Insta Feed -->
    <div class="single-insta-feed">
      <img src="img/instagram-img/6.png" alt="">
      <!-- Hover Effects -->
      <div class="hover-effects">
        <a href="#" class="d-flex align-items-center justify-content-center"><i class="fa fa-instagram"></i></a>
      </div>
    </div>
    <!-- Single Insta Feed -->
    <div class="single-insta-feed">
      <img src="img/instagram-img/7.png" alt="">
      <!-- Hover Effects -->
      <div class="hover-effects">
        <a href="#" class="d-flex align-items-center justify-content-center"><i class="fa fa-instagram"></i></a>
      </div>
    </div>
  </div>
</div>
<!-- ##### Instagram Feed Area End ##### -->

<!-- ##### Footer Area Start ##### -->
<footer class="footer-area text-center">
  <div class="container">
    <div class="row">
      <div class="col-12">

        <!-- Footer Nav Area -->
        <div class="classy-nav-container breakpoint-off">
          <!-- Classy Menu -->
          <nav class="classy-navbar justify-content-center">

            <!-- Navbar Toggler -->
            <div class="classy-navbar-toggler">
              <span class="navbarToggler"><span></span><span></span><span></span></span>
            </div>

            <!-- Menu -->
            <div class="classy-menu">

              <!-- close btn -->
              <div class="classycloseIcon">
                <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
              </div>

              <!-- Nav Start -->
              <div class="classynav">
                <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">About Us</a></li>
                  <li><a href="#">Lifestyle</a></li>
                  <li><a href="#">travel</a></li>
                  <li><a href="#">Music</a></li>
                  <li><a href="#">Contact</a></li>
                </ul>
              </div>
              <!-- Nav End -->
            </div>
          </nav>
        </div>

        <!-- Footer Social Area -->
        <div class="footer-social-area mt-30">
          <a href="#" data-toggle="tooltip" data-placement="top" title="Pinterest"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
          <a href="#" data-toggle="tooltip" data-placement="top" title="Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
          <a href="#" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
          <a href="#" data-toggle="tooltip" data-placement="top" title="Dribbble"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
          <a href="#" data-toggle="tooltip" data-placement="top" title="Behance"><i class="fa fa-behance" aria-hidden="true"></i></a>
          <a href="#" data-toggle="tooltip" data-placement="top" title="Linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
        </div>
      </div>
    </div>
  </div>

  <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
  Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
  <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->

</footer>


<!-- ##### Footer Area End ##### -->

<!-- jQuery (Necessary for All JavaScript Plugins) -->
<script th:src="@{js/jquery/jquery-2.2.4.min.js}" src="js/jquery/jquery-2.2.4.min.js"></script>
<!-- Popper js -->
<script th:src="@{js/popper.min.js}" src="js/popper.min.js"></script>
<!-- Bootstrap js -->
<script th:src="@{js/bootstrap.min.js}" src="js/bootstrap.min.js"></script>
<!-- Plugins js -->
<script th:src="@{js/plugins.js}" src="js/plugins.js"></script>
<!-- Active js -->
<script th:src="@{js/active.js}" src="js/active.js"></script>
<!-- Google Map js -->
<script th:src="" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAwuyLRa1uKNtbgx6xAJVmWy-zADgegA2s"></script>
<script th:src="@{js/map-active.js}" src="js/map-active.js"></script>

</body>

</html>